<template>
  <div>
    <el-dialog
      title="选择渠道"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false">
      <div style="display: flex;flex-wrap: wrap;">
        <div v-for="item in channelList" :key="item.id" style="display: flex;align-items: center;margin-right: 15px;margin-bottom: 10px;">
          <span>{{ item.name }}</span>
          <el-switch v-model="item.checked"></el-switch>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="close">关闭</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { getTemplateChannelList } from '@/api/shuiyin/shuiyin'
  export default {
    props: {
      channelIds: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        dialogVisible: false,
        channelList: []
      }
    },
    // created() {
    //   this.getList()
    // },
    methods: {
      open() {
        this.dialogVisible = true;
        this.channelList = [];
        this.init();
      },

      close() {
        this.dialogVisible = false;
      },

      async getList() {
        this.channelList = JSON.parse(JSON.stringify(rows));
      },

      async init() {
        const { rows } = await getTemplateChannelList({pageNum: 1,pageSize: 1000});
        const array = this.channelIds ? this.channelIds.split(',') : [];
        this.channelList = rows.map(item => {
          return {
            checked: array.includes(item.id),
            id: item.id,
            name: item.name
          }
        })
        console.log('channelList', this.channelList)
      },

      confirm() {
        const array = this.channelList.filter(item => {
          return item.checked
        }).map(ele => {
          return ele.id
        })
        if (!array.length) {
          this.$message.warning('请至少选择一个渠道！');
          return
        }
        this.$emit('confirm', array.join(','))
        this.close();
      }
    }
  }
</script>